<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <script src="./lib/vue-2.4.0.js"></script>
        <style>
            [v-cloak]{/*解决*/
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
        <!-- 使用v-cloak可以解决插值表达式闪烁的问题 -->
            <p v-cloak>++{{msg}}+</p>
            <h5 v-text ="msg"></h5>
            <!-- 默认v-text没有闪烁问题  但是文本内容会被msg覆盖-->
            <p v-html="msg2"> </p>

            <!-- v-bind指令提供绑定属性的指令 -->
            <!-- <input type="button" value="按钮" v-bind:title = "mytitle"  name="" id=""> -->
            <!-- 下面是v-bind的简写方式 还可以进行拼接-->
            <input type="button" value="按钮" :title = "mytitle+'112233'"  name="" id="">

            <!-- 下面晚上v-on属性 -->
            <!-- <input type="button" value="按钮" :title = "mytitle+'112233'" v-on:click="show" name="" id=""> -->
            <!-- 简写方式 -->
            <input type="button" value="按钮" :title = "mytitle+'112233'" @click="show" name="" id="">

        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg:'123',
                    msg2:'<h3>你是那个哟</h3>',
                    mytitle:'this is title'
                },
                methods:{//这个是与v-on事件想等等相关联的里面
                    // show:function(){
                    //     alert('hello')
                    // }
                    //简写方式
                    show(){
                        alert('gei 里 gei 气 ')
                    }
                }
            })
        </script>
    </body>
</html>